<template>
  <div class="feedback-container">
    <el-card class="feedback-card">
      <template #header>
        <div class="card-header">
          <span>我的反馈</span>
          <el-button type="primary" @click="navigateToNewFeedback">
            创建新反馈
          </el-button>
        </div>
      </template>
      
      <!-- 反馈列表 -->
      <div v-if="feedbackList.length > 0">
        <el-timeline>
          <el-timeline-item
            v-for="(feedback, index) in feedbackList"
            :key="index"
            :timestamp="feedback.submitTime"
            :type="getStatusType(feedback.status)"
          >
            <el-card class="feedback-item">
              <div class="feedback-header">
                <div class="tag-group">
                  <el-tag :type="getTypeTagType(feedback.type)">{{ getTypeText(feedback.type) }}</el-tag>
                  <el-tag :type="getStatusTagType(feedback.status)">{{ getStatusText(feedback.status) }}</el-tag>
                </div>
                <el-button 
                  v-if="feedback.status === FeedbackStatus.Pending"
                  type="danger" 
                  size="small" 
                  @click="handleCancelFeedback(feedback)"
                >
                  取消反馈
                </el-button>
              </div>
              
              <div class="feedback-content">
                <p class="content-title">反馈内容：</p>
                <p class="content-text">{{ feedback.content }}</p>
              </div>
              
              <div v-if="feedback.replyContent" class="reply-section">
                <el-divider content-position="left">
                  <el-icon><ChatDotRound /></el-icon>
                  <span class="reply-header">管理员回复</span>
                </el-divider>
                
                <div class="reply-info">
                  <span class="replier-name">{{ feedback.adminName }}</span>
                  <span class="reply-time">{{ feedback.handleTime }}</span>
                </div>
                
                <p class="reply-content">{{ feedback.replyContent }}</p>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      
      <!-- 暂无反馈提示 -->
      <el-empty 
        v-else 
        description="暂无反馈记录" 
        :image-size="200"
      >
        <el-button type="primary" @click="navigateToNewFeedback">
          创建新反馈
        </el-button>
      </el-empty>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ChatDotRound } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { getSuggestionApi, cancelSuggestionApi } from '@/api/suggestion'
import { useUserStore } from '@/store/islogin'
const useUser = useUserStore()

// 反馈状态枚举
enum FeedbackStatus {
  Pending = 0,  // 待处理
  Replied = 1,  // 已回复
  Closed = 2    // 已关闭
}

// 反馈类型枚举（与后端保持一致）
enum FeedbackType {
  Bug = 'Bug',         // 问题反馈
  Feature = 'Feature', // 功能建议
  Content = 'Content', // 内容问题
  Other = 'other'      // 其他
}

// 反馈数据接口
interface Feedback {
  fbId: number
  type: FeedbackType
  content: string
  submitTime: string
  status: FeedbackStatus
  adminName?: string
  replyContent?: string
  handleTime?: string
}

// 模拟的反馈数据
const feedbackList = ref<Feedback[]>([])
const getFeedbackList = async()=>{
  if(useUser.user){
    const res = await getSuggestionApi(useUser.user)
    if(res.code==200){
      feedbackList.value = res.data
    }
  }else{
    ElMessage.error("请进行登录")
  }
  
}

// 取消反馈
const handleCancelFeedback = async (feedback: Feedback) => {
  try {
    await ElMessageBox.confirm(
      '确定要取消这条反馈吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    const res = await cancelSuggestionApi(feedback)
    if (res.code === 200) {
      ElMessage.success('反馈已取消')
      // 重新获取反馈列表
      getFeedbackList()
    } else {
      ElMessage.error(res.msg || '取消反馈失败')
    }
  } catch (error) {
    // 用户取消操作，不做处理
  }
}

const router = useRouter()

// 获取状态对应的时间线图标样式
const getStatusType = (status: FeedbackStatus) => {
  switch (status) {
    case FeedbackStatus.Pending:
      return 'warning'
    case FeedbackStatus.Replied:
      return 'success'
    case FeedbackStatus.Closed:
      return 'info'
    default:
      return 'primary'
  }
}

// 获取类型文本显示
const getTypeText = (type: FeedbackType) => {
  switch (type) {
    case FeedbackType.Bug:
      return '问题反馈'
    case FeedbackType.Feature:
      return '功能建议'
    case FeedbackType.Content:
      return '内容问题'
    case FeedbackType.Other:
      return '其他'
    default:
      return '未知类型'
  }
}

// 获取反馈类型对应的标签样式
const getTypeTagType = (type: FeedbackType) => {
  switch (type) {
    case FeedbackType.Bug:
      return 'danger'
    case FeedbackType.Feature:
      return 'success'
    case FeedbackType.Content:
      return 'warning'
    case FeedbackType.Other:
      return 'info'
    default:
      return 'info'
  }
}

// 获取状态对应的标签样式
const getStatusTagType = (status: FeedbackStatus) => {
  switch (status) {
    case FeedbackStatus.Pending:
      return 'warning'
    case FeedbackStatus.Replied:
      return 'success'
    case FeedbackStatus.Closed:
      return 'info'
    default:
      return ''
  }
}

// 获取状态对应的文本
const getStatusText = (status: FeedbackStatus) => {
  switch (status) {
    case FeedbackStatus.Pending:
      return '待处理'
    case FeedbackStatus.Replied:
      return '已处理'
    case FeedbackStatus.Closed:
      return '已关闭'
    default:
      return '未知状态'
  }
}

// 导航到新建反馈页面
const navigateToNewFeedback = () => {
  router.push('/user/suggestions')
}

onMounted(() => {
  getFeedbackList()
})
</script>

<style scoped>
.feedback-container {
  padding: 20px;
}

.feedback-card {
  max-width: 900px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.feedback-item {
  margin-bottom: 10px;
  border-radius: 8px;
  transition: all 0.3s;
}

.feedback-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tag-group {
  display: flex;
  gap: 8px;
}

.feedback-content {
  margin: 15px 0;
}

.content-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #606266;
}

.content-text {
  line-height: 1.6;
  color: #303133;
  word-break: break-word;
}

.reply-section {
  margin-top: 15px;
  padding-top: 5px;
}

.reply-header {
  margin-left: 5px;
  font-weight: bold;
  color: #409EFF;
}

.reply-info {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.replier-name {
  font-weight: bold;
  color: #606266;
}

.reply-time {
  color: #909399;
  font-size: 0.9em;
}

.reply-content {
  background-color: #f5f7fa;
  padding: 10px 15px;
  border-radius: 6px;
  line-height: 1.6;
}
</style>
